<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="Stylesheet" href="/pension/styles/default.css" />
<link rel="Stylesheet" href="/pension/styles/input.css" />
<style type="text/css">
#backBox {
	background-color: #000000;
}

#bigBox {
	background-color: #fff600;
	width: 1000px;
	margin: auto;
}

#sBox {
	width: 301px;
	height: 304px;
}

#imgBox {
	width: 780px;
	margin: auto;
}

.image_list {
	overflow: hidden;
	position: relative;
	width: 800px;
	height: 550px;
	
	border: 0;
	cursor: pointer;
	clear: both;
}

.image_list .images {
	position: absolute;
	display: none;
}

ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 10pt;
}

.no_label {
	width: 600px;
	cursor: pointer;
}

.no_label li {
	width: 30px;
	height: 30px;
	float: left
}

</style>
<script type="text/Javascript">
	function togglecontent(id) {
		var word = document.getElementById('word' + id);
		var img = document.getElementById('img' + id);

		if (word.style.display == 'none') {
			word.style.display = 'inline';
			img.style.display = 'none';
		} else {
			word.style.display = 'none';
			img.style.display = 'inline';
		}
	}



	
	function RollImage(json) {
		//이미지 롤링 설정값
		var config = {
			currentImg : 0,
			nextImg : 1,
			listArea : e(json.list_area),
			imageList : e(json.list_area).getElementsByTagName("DIV"),
			imgCnt : e(json.list_area).getElementsByTagName("DIV").length - 1, //0부터 시작
			rollTime : json.roll_time,
			moveTime : json.move_time,
			coordX1 : 0,
			coordX2 : e(json.list_area).offsetWidth,
			coordY : e(json.list_area).offsetHeight,
			moveAt : json.moveAt,
			direction : json.direction,
			label : e(json.label),
			labelType : json.labelType
		};

		labelBind(config); //라벨(버튼) 바인드
		setRoll(config); //롤링 시작
		rollPause(config); //마우스 오버시 롤링 멈춤

		//이미지 롤링 기본 세팅하기
		function setRoll(c) {
			c.coordX1 = 0;
			c.coordX2 = c.listArea.offsetWidth;
			c.coordY = c.listArea.offsetHeight;

			if (c.direction == "left" || c.direction == "down") {
				c.coordX2 = c.coordX2 * -1;
				c.coordY = c.coordY * -1;
			}

			c.imageList[c.nextImg].style.display = "block";
			setPosition(c);
			rollOver(c)
			//c.imageList[c.nextImg].style.left = c.coordX2+"px";

			c.rollTimer = setTimeout(function() {
				imgMove(c)
			}, c.rollTime);
		}
		;

		//이미지를 움직이게 한다.
		function imgMove(c) {
			if (c.direction == "right" || c.direction == "left") {
				c.imageList[c.currentImg].style.left = c.coordX1 + "px";
				c.imageList[c.nextImg].style.left = c.coordX2 + "px";
			} else if (c.direction == "up" || c.direction == "down") {
				c.imageList[c.currentImg].style.top = c.coordX1 + "px";
				c.imageList[c.nextImg].style.top = c.coordY + "px";
			}
			//alert(c.imageList[c.nextImg].style.left);
			var moveAt = parseInt(c.moveAt);
			if (c.direction == "right") {
				c.coordX1 -= moveAt;
				c.coordX2 -= moveAt;
			} else if (c.direction == "left") {
				c.coordX1 += moveAt;
				c.coordX2 += moveAt;
			} else if (c.direction == "up") {
				c.coordX1 -= moveAt;
				c.coordY -= moveAt;
			} else if (c.direction == "down") {
				c.coordX1 += moveAt;
				c.coordY += moveAt;
			}

			//if(c.coordX1 < (-1*c.listArea.offsetWidth) ) {
			if (isNextImgRoll(c)) {
				c.currentImg = c.nextImg;
				c.nextImg += 1;
				if (c.currentImg == c.imgCnt)
					c.nextImg = 0;
				clearTimeout(c.moveTimer);
				clearTimeout(c.rollTimer);
				setRoll(c);
				return;
			}
			c.moveTimer = setTimeout(function() {
				imgMove(c)
			}, c.moveTime);
		}
		;

		//다음 이미지 롤링 해야하는지 확인
		function isNextImgRoll(c) {
			var d = c.direction;
			if (d == "right" && c.coordX2 < 0)
				return true;
			else if (d == "left" && c.coordX2 > 0)
				return true;
			else if (d == "up" && c.coordY < 0)
				return true;
			else if (d == "down" && c.coordY > 0)
				return true;

			return false
		}
		;

		//롤링 방향에 따른 두번째 이미지 위치 좌표 설정
		function setPosition(c) {
			var d = c.direction;
			if (d == "right")
				c.imageList[c.nextImg].style.left = c.listArea.offsetWidth
						+ "px";
			else if (d == "left")
				c.imageList[c.nextImg].style.left = (-1 * c.listArea.offsetWidth)
						+ "px";
			else if (d == "up")
				c.imageList[c.nextImg].style.top = c.listArea.offsetHeight
						+ "px";
			else if (d == "down")
				c.imageList[c.nextImg].style.top = (-1 * c.listArea.offsetHeight)
						+ "px";

			//alert(c.imageList[c.nextImg].style.left);
		}
		;

		//onmouseover 시 움직임 멈춤
		function rollPause(c) {
			//alert(c.listArea.onmouseover);
			c.listArea.onmouseover = function() {
				clearTimeout(c.rollTimer);
			}

			c.listArea.onmouseout = function() {
				//alert("c.listArea.onmouseout");
				setRoll(c);
			}
		}
		;

		//라벨과 바인드
		function labelBind(c) {
			if (c.label == null)
				return; //라벨을 사용하지 않으면 아래는 실행되지 않는다.
			var labels = c.label.getElementsByTagName(c.labelType);

			c.label.onmouseover = function(event) { //라벨영역에 마우스가 오면
				var evt = event || window.event;
				var t = evt.target || evt.srcElement;
				for (n in labels) {
					if (labels[n] == t) {
						//c.imageList[c.currentImg].style.display = "none";
						c.currentImg = parseInt(n);
						c.nextImg = parseInt(n) + 1;
						if (c.currentImg == c.imgCnt)
							c.nextImg = 0;
						clearTimeout(c.rollTimer);
						viewImg(c);
						rollOver(c);
						break;
					}
				}
				//alert(event.srcElement)
			}

			c.label.onmouseout = function(event) {
				var evt = event || window.event;
				var t = evt.target || evt.srcElement;
				for (n in labels) {
					if (labels[n] == t) {
						setRoll(c);
						break;
					}
				}
			}
		}
		;

		//라벨 onmouseover 시 클래스 적용
		function rollOver(c) {
			if (c.label == null)
				return;
			var els = c.label.getElementsByTagName(c.labelType);

			if (c.labelType == "img") {

				for (n in els) {
					if (typeof els[n] == "object") {
						if (n == c.currentImg) {
							els[n].src = els[n].getAttribute("oversrc");
						} else {
							els[n].src = els[n].getAttribute("outsrc");
						}
					}
				}
			} else {
				for (n in els) {
					if (typeof els[n] == "object") {
						if (n == c.currentImg) {
							var ocss = els[n].className;
							els[n].className = ocss + " "
									+ els[n].getAttribute("overcss");
						} else {
							els[n].className = els[n].getAttribute("outcss");
						}
					}
				}
			}
		}

		//라벨에서 선택된 이미지 보이기
		function viewImg(c) {
			//alert(c.currentImg);
			for (n = 0; n < c.imgCnt + 1; n++) {
				c.imageList[n].style.display = "none";
			}

			c.imageList[c.currentImg].style.left = "0px";
			c.imageList[c.currentImg].style.top = "0px";
			c.imageList[c.currentImg].style.display = "block";
		}
		;
	}

	function debug(t) {
		e("dis").innerHTML = t + "<br>";
	}

	//id값으로 객체 반환
	function e(id) {
		var o = document.getElementById(id);
		if (typeof o == undefined || o == null) {
			return null;
		}

		return o;
	}
//-->
</script>

</head>
<body>

	<div id="pageContainer">
		<%
			pageContext.include("/WEB-INF/views/include/header.jsp");
		%>

	</div>



	<div id="backBox">

		<div id="imgBox">
			<ul class="no_label" id="label_3">
				<li><img src="image/backmain/on1.jpg"
					oversrc="image/backmain/on1.jpg" outsrc="image/backmain/off1.jpg" /></li>
				<li><img src="image/backmain/off2.jpg"
					oversrc="image/backmain/on2.jpg" outsrc="image/backmain/off2.jpg" /></li>
				<li><img src="image/backmain/off3.jpg"
					oversrc="image/backmain/on3.jpg" outsrc="image/backmain/off3.jpg" /></li>
				<li><img src="image/backmain/off4.jpg"
					oversrc="image/backmain/on4.jpg" outsrc="image/backmain/off4.jpg" /></li>
				<li><img src="image/backmain/off5.jpg"
					oversrc="image/backmain/on5.jpg" outsrc="image/backmain/off5.jpg" /></li>
				<li><img src="image/backmain/off6.jpg"
					oversrc="image/backmain/on6.jpg" outsrc="image/backmain/off6.jpg" /></li>
				<li><img src="image/backmain/off7.jpg"
					oversrc="image/backmain/on7.jpg" outsrc="image/backmain/off7.jpg" /></li>
				<li><img src="image/backmain/off8.jpg"
					oversrc="image/backmain/on8.jpg" outsrc="image/backmain/off8.jpg" /></li>
				<li><img src="image/backmain/off9.jpg"
					oversrc="image/backmain/on9.jpg" outsrc="image/backmain/off9.jpg" /></li>
				<li><img src="image/backmain/off0.jpg"
					oversrc="image/backmain/on0.jpg" outsrc="image/backmain/off0.jpg" /></li>
			</ul>
			
			<div class="image_list" id="image_list_3">
				<div class="images" style="display: block">
					<img src="image/backmain/back1.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back2.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back3.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back4.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back5.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back6.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back7.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back8.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back9.jpg" />
				</div>
				<div class="images">
					<img src="image/backmain/back0.jpg" />
				</div>
			</div>
		</div>

		<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

		
	



	<script type="text/javascript">
	<!--
		var j3 = {
			"list_area" : "image_list_3",
			"moveAt" : "100",
			"roll_time" : "3000",
			"move_time" : "100",
			"direction" : "right",
			"label" : "label_3",
			labelType : "img"
		};
		new RollImage(j3);
		//oj1.setRoll();
	//-->
	</script>
</body>
</html>


